<template>
    <div>
        <el-form :model="form" label-width="100px" :rules="rules" ref="form" style="width: 600px">
            <el-form-item label="商品名称" prop="commondity_name">
                <el-input v-model="form.commondity_name" />
            </el-form-item>
            <el-form-item label="商品描述" prop="commondity_description">
                <el-input v-model="form.commondity_description" />
            </el-form-item>
            <el-form-item label="商品图片" prop="commondity_img">
                <el-upload class="commondity-uploader" :action="`${UPLOADURL}/upload`" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.commondity_img" :src="commondity[0].commondity_img" class="commondity" />
                    <i v-else class="el-icon-plus commondity-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格" prop="commondity_price">
                <el-input v-model="form.commondity_price" />
            </el-form-item>
            <el-form-item label="店铺编号">
                <el-input v-model="form.petshop_id" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">立即修改</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import httpApi from '@/http';
export default {
    data() {
        return {
            commondity:[],
            commondity_id: '',
            form: {
                commondity_name:"",
                commondity_description: "",
                commondity_img: '',
                commondity_price: '',
                commondity_id: '',
                petshop_id: ''
            },
            rules: {
                commondity_name: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                ],
                commondity_description: [
                    { required: true, message: "请选择商品描述", trigger: "blur" },
                ],
                commondity_img: [
                    { required: true, message: "请选择商品头像", trigger: "blur" },
                ],
                commondity_price: [
                    { required: true, message: "请选择商品价格", trigger: "blur" },
                ],
            },
        }
    },
    methods: {
        queryCommondityById(id) {
            let params = { commondity_id: id }
            httpApi.petshopApi.queryCommondityById(params).then(res => {
                console.log(res)
                this.commondity = res.data.data
                this.form.commondity_name = this.commondity[0].commondity_name
                this.form.commondity_description = this.commondity[0].commondity_description
                this.form.commondity_img = this.commondity[0].commondity_img
                this.form.commondity_price = this.commondity[0].commondity_price
                this.form.petshop_id = this.commondity[0].petshop_id
                this.form.commondity_id=this.commondity_id
                console.log(this.form)
            })

        },

        // 

        handleAvatarSuccess(res) {
            console.log(res)
            this.form.commondity_img = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log("验证通过");
                    httpApi.petshopApi.updateShop(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: '商品修改成功',
                                type: 'success'
                            });
                            //重置表单

                        } else {
                            this.$message.error('修改失败')
                        }
                    })
                } else {
                    console.log("验证失败！");
                }
            });
        },
        reset() {
            this.$refs.form.resetFields()
        }












    },
    mounted() {
        this.commondity_id = this.$route.params.id
        this.queryCommondityById(this.commondity_id)
    },
}
</script>

<style lang="scss" scoped>
.commondity-uploader {
    border: 1px dashed #aaa;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.commondity-uploader .el-upload:hover {
    border-color: #409eff;
}

.commondity-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.commondity {
    width: 178px;
    height: 178px;
    display: block;
}
</style>